/* 手动连接redux版
* */
import React from 'react';
import { Unsubscribe, bindActionCreators } from '../redux';
import actions from '../store/actions/counter2';
import store from '../store';
interface Props {

}
interface State {
    number: number;
}



//经过绑定之后，函数体从返回一个action成为派发这个action
const boundActions = bindActionCreators(actions, store.dispatch);
/* boundActions = {
    increment: () => store.dispatch({ type: INCREMENT }),
    decrement: () => store.dispatch({ type: DECREMENT })
} */


export default class Counter1 extends React.Component<Props, State> {
    unsubscribe: Unsubscribe|undefined=undefined;
    constructor(props: Props) {
      super(props);
      this.state = {
        number: store.getState().counter2.number
      }
    }
    componentDidMount() {
      this.unsubscribe = store.subscribe(() => {
        this.setState({ number: store.getState().counter2.number });
      });
    }
    componentWillUnmount() {
        this.unsubscribe!();
    }
    render() {
      return (
        <div>
          <p>{this.state.number}</p>
          <button onClick={boundActions.increment}>+</button>
          <button onClick={boundActions.decrement}>-</button>
        </div>
      )
    }
}
